<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1、导入mapbox的依赖 js+css -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <!-- 2、设置地图容器的挂载点 -->
    <div id="map">

    </div>
    <script>
        /* 3、实例化地图 */
        mapboxgl.accessToken = 'pk.eyJ1IjoiemhvbmdkaXNodW1hIiwiYSI6ImNsNXJoYXR5eTI2bGgzZW53d2didWF1c3AifQ.6vOplM2NQc_xnJW3aA5ZBA';
        const map = new mapboxgl.Map({
            /* 将地图挂载到对应的DOM上 相当于ol的target */
            container: "map",
            /* 相当于ol的layers */
            style: "mapbox://styles/mapbox/streets-v12",
            center: [114.30, 30.50],
            zoom: 6
        })
        /* 定制化背景 */
        var data = {
            type: "Feature",
            geometry: {
                type: "Polygon",
                coordinates: [
                    [
                        [114.30, 30.50], [116, 30.50],
                        [116, 28], [114.30, 28], [114.30, 30.50]
                    ]
                ]
            }
        }
        /* geojson geometry 
        type=="Point" mapbox type='circle'
        type=='LineString'   type='line'
        type=='Polygon'      type='fill'/line
         */
        map.on("style.load", () => {
            map.setFog({

            })
            //填充
            map.addLayer({
                id: "box-fill",
                type: "fill",
                source: {
                    type: "geojson",
                    data
                },
                paint: {
                    'fill-color': "red",
                    'fill-opacity': 0.5
                }
            })

            /* 描边 */
            map.addLayer({
                id: "box-stroke",
                type: "line",
                source: {
                    type: "geojson",
                    data
                },
                paint: {
                    'line-width': 5
                }
            })


        })
    </script>
</body>

</html>